<template>
	<x-popup :value="value" mode="center" z-index="10203" @close="$emit('input', false)">
		<view style="padding: 0 30rpx;">
			<view class="head-container u-text-center">
				<view class="u-f-36 u-lh-50 font-medio">{{ lang_goods.doingCollage }}</view>

				<view class="u-m-t-14 u-f-24 u-lh-34 color-grew">{{ lang_goods.inviteFirendCollage[0] }} {{ (obj.limitNum || 0) - (obj.num || 0) }} {{ lang_goods.inviteFirendCollage[1] }}
				</view>

				<view class="flex-center-center u-m-t-58">
					<view v-for="(item, index) in showList" :key="index"
					:class="['u-text-center', index ? 'u-m-l-44' : '']"
					style="width: 96rpx;"
					@click="changeAction(item)"
					>
						<view class="flex-center-center">
							<view class="u-avatar-84 clear-flex">
								<x-image :src="item.isEmpty ? item.avatar : showImage(item.avatar)" />
							</view>
						</view>
						<view :class="['u-f-24 u-m-t-14', item.isEmpty ? 'linecamp-1' : '']">
							{{ item.nick || lang_goods.clickInvite }}</view>
					</view>
				</view>

				<view class="flex-center-center u-m-t-52">
					<x-common-btn width="420" height="80" @click="$emit('click')">
						<view>{{ lang_goods.inviteCollage }}</view>
					</x-common-btn>
				</view>
				<view v-if="!obj.hasPin" class="flex-center-center u-m-t-20">
					<x-common-btn width="420" height="80" @click="joinAction">
						<view>{{ lang_goods.joinCollage }}</view>
					</x-common-btn>
				</view>
			</view>

			<view class="flex-center-center u-m-t-32">
				<image src="@/static/image/common/close_fill.png" style="width: 60rpx; height: 60rpx;"
					class="clear-flex" @click="$emit('input', false)"></image>
			</view>
		</view>
	</x-popup>
</template>

<script>
	import {
		goodsPinUserList,
		goodsInfo
	} from '@/api/user/goods.js'
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			},
			obj: {
				default: () => ({})
			}
		},
		data() {
			let defaultUser = {
				avatar: require('@/static/image/common/add_red.png'),
				isEmpty: true
			}
			return {
				defaultUser,
				list: [],
			}
		},
		computed: {
			showList() {
				let max = this.obj.limitNum || 1
				let list = [],
					joinList = this.list
				for (let i = 0; i < max; i++) {
					list.push(joinList[i] || this.defaultUser)
				}
				return list
			}
		},
		watch: {
			obj: {
				handler(v) {
					console.log(v)
					if (v.pinId) {
						this.initList()
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			// 点击列表子项
			changeAction(item) {
				if (item.isEmpty) {
					this.$emit('click')
				} else {
					this.jumpUrl(`/pages/user/personal/index/index?userId=${ item.userId }`)
				}
			},
			// 参与拼团
			joinAction() {
				goodsInfo({
					goodsId: this.obj.goodsId
				}).then((result) => {
					let list = [
						{
							...result,
							pinId: this.obj.pinId,
							amount: this.obj.amount,
							id: this.obj.goodsSpecAttributePriceId
						}
					]
					uni.navigateTo({
						url: '/pages/user/order/ready/ready',
						success: res => {
							res.eventChannel.emit('order-ready', ({
								type: 'collage',
								list
							}))
						}
					})
				})
			},
			// 初始化拼团列表
			initList() {
				goodsPinUserList({
					pinId: this.obj.pinId
				}).then((result) => {
					this.list = result || []
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.head {
		&-container {
			padding: 28rpx 64rpx 52rpx;
			width: 630rpx;
			border-radius: 12rpx;
			background-color: #FFFFFF;
		}

		&-image {
			width: 124rpx;
			height: 124rpx;
			border-radius: 4rpx;
			overflow: hidden;
			background-color: #f9f9f9;
		}
	}
</style>
